<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Table component - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Table</a></li>
                    <li class="toc-entry"><a href="#_table_create">Create table</a></li>
                    <li class="toc-entry"><a href="#_table_options">Table options</a></li>
                    <li class="toc-entry"><a href="#_table_columns">Columns</a></li>
                    <li class="toc-entry"><a href="#_table_data">Data cells</a></li>
                    <li class="toc-entry"><a href="#_table_sorting">Sorting</a></li>
                    <li class="toc-entry"><a href="#_table_search">Table search</a></li>
                    <li class="toc-entry"><a href="#_table_filtering">Filtering</a></li>
                    <li class="toc-entry"><a href="#_table_pagination">Pagination</a></li>
                    <li class="toc-entry"><a href="#_table_rows_counter">Rows counter</a></li>
                    <li class="toc-entry"><a href="#_table_info">Table info</a></li>
                    <li class="toc-entry"><a href="#_table_inspector">Table inspector</a></li>
                    <li class="toc-entry"><a href="#_table_export">Export data</a></li>
                    <li class="toc-entry"><a href="#_table_external_data">External data</a></li>
                    <li class="toc-entry"><a href="#_table_events">Events</a></li>
                    <li class="toc-entry"><a href="#_table_methods">Methods</a></li>
                    <li class="toc-entry"><a href="#_table_customize">Customize</a></li>
                    <li class="toc-entry"><a href="#_table_custom_wrappers">Custom wrappers</a></li>
                    <li class="toc-entry"><a href="#_table_horizontal_scroll">Horizontal scroll</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Table component</h1>
                <p class="text-leader">
                    Create interactive table with sorting, filtering and pagination features.
                </p>

                <!-- ads-html -->

                <h3 id="_table_create">Create table</h3>
                <p class="text-small">New in 4.2.8, updated in 4.2.23</p>
                <p>
                    If you need to create interactive table with ordering, filtering, searching and pagination features, you can use Metro 4 <code>table</code> component.
                    To create <code>table</code>, add attribute <code>data-role="table"</code> to your HTML table element and setup, if need, additional options with special attributes.
                    You can create <code>table</code> and for your own HTML table with predefined data and for the table with remote data definition.
                </p>
                <p class="remark info">
                    An important condition - is the creation of sections <code>thead</code> and <code>tbody</code>.
                </p>
                <div class="example">
                    <table class="table striped table-border mt-4"
                           data-role="table"
                           data-cls-table-top="row flex-nowrap"
                           data-cls-search="cell-md-8"
                           data-cls-rows-count="cell-md-4"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-show-activity="false"
                           data-source="data/table.json"
                    >
                    </table>
                </div>
                <pre><code class="html">
                    &lt;table class="table" data-role="table"&gt;
                    ...
                    &lt;/table&gt;
                </code></pre>

                <h3 id="_table_options">Table options</h3>
                <p>
                    You can use different options to define table behavior. This options you can use in <code>&lt;table&gt;</code> tag definition.
                </p>
                <table class="table table-border cell-border options-table mt-4">
                    <thead>
                    <tr>
                        <td>Option</td>
                        <td>Data-*</td>
                        <td>Default</td>
                        <td>Desc</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>check</code></td>
                        <td><code>data-check</code></td>
                        <td>false</td>
                        <td>Enable checkbox or radio for each row</td>
                    </tr>
                    <tr>
                        <td><code>checkType</code></td>
                        <td><code>data-check-type</code></td>
                        <td>checkbox</td>
                        <td>Draw checkbox or radio for each row</td>
                    </tr>
                    <tr>
                        <td><code>checkStyle</code></td>
                        <td><code>data-check-style</code></td>
                        <td>1</td>
                        <td>Set style for checkbox or radio, 1 or 2</td>
                    </tr>
                    <tr>
                        <td><code>checkName</code></td>
                        <td><code>data-check-name</code></td>
                        <td>null</td>
                        <td>Set name for checkbox or radio</td>
                    </tr>
                    <tr>
                        <td><code>checkColIndex</code></td>
                        <td><code>data-check-col-index</code></td>
                        <td>0</td>
                        <td>Data column index from 0 for checkbox or radio value</td>
                    </tr>
                    <tr>
                        <td><code>checkStoreKey</code></td>
                        <td><code>data-store-key</code></td>
                        <td>TABLE:$1:KEYS</td>
                        <td>Key for storage (used window.storage), where check value are stored. $1 will be replaced with table id.</td>
                    </tr>
                    <tr>
                        <td><code>rownum</code></td>
                        <td><code>data-rownum</code></td>
                        <td>false</td>
                        <td>Show/hide rows numbers</td>
                    </tr>
                    <tr>
                        <td><code>rownumTitle</code></td>
                        <td><code>data-rownum-title</code></td>
                        <td>#</td>
                        <td>Title for rownum head cell</td>
                    </tr>
                    <tr>
                        <td><code>filters</code></td>
                        <td><code>data-filters</code></td>
                        <td></td>
                        <td>Table filters definition, comma separated value with functions names</td>
                    </tr>
                    <tr>
                        <td><code>filtersOperator</code></td>
                        <td><code>data-filters-operator</code></td>
                        <td>and</td>
                        <td>Defined how filters combined, value <code>and</code> or <code>or</code></td>
                    </tr>
                    <tr>
                        <td><code>source</code></td>
                        <td><code>data-source</code></td>
                        <td>null</td>
                        <td>Link to external data</td>
                    </tr>
                    <tr>
                        <td><code>searchMinLength</code></td>
                        <td><code>data-search-min-length</code></td>
                        <td>1</td>
                        <td>Min length for begin searching</td>
                    </tr>
                    <tr>
                        <td><code>searchThreshold</code></td>
                        <td><code>data-search-threshold</code></td>
                        <td>500</td>
                        <td>The threshold in ms to begin searching, while user press keys for search phrase and the interval between key press less than this value, searching not started</td>
                    </tr>
                    <tr>
                        <td><code>searchFields</code></td>
                        <td><code>data-search-fields</code></td>
                        <td></td>
                        <td>Comma-separated value with column names, where will be search</td>
                    </tr>
                    <tr>
                        <td><code>showRowsSteps</code></td>
                        <td><code>data-show-rows-steps</code></td>
                        <td>true</td>
                        <td>Show/hide rows steps box</td>
                    </tr>
                    <tr>
                        <td><code>showSearch</code></td>
                        <td><code>data-show-search</code></td>
                        <td>true</td>
                        <td>Show/hide search field</td>
                    </tr>
                    <tr>
                        <td><code>showTableInfo</code></td>
                        <td><code>data-show-table-info</code></td>
                        <td>true</td>
                        <td>Show/hide table info block</td>
                    </tr>
                    <tr>
                        <td><code>showPagination</code></td>
                        <td><code>data-show-pagination</code></td>
                        <td>true</td>
                        <td>Show/hide table pagination</td>
                    </tr>
                    <tr>
                        <td><code>paginationShortMode</code></td>
                        <td><code>data-pagination-short-mode</code></td>
                        <td>true</td>
                        <td>Show table pagination in short mode</td>
                    </tr>
                    <tr>
                        <td><code>showActivity</code></td>
                        <td><code>data-show-activity</code></td>
                        <td>true</td>
                        <td>Show activity for table operations</td>
                    </tr>
                    <tr>
                        <td><code>muteTable</code></td>
                        <td><code>data-mute-table</code></td>
                        <td>true</td>
                        <td>Mute table for table operations</td>
                    </tr>
                    <tr>
                        <td><code>rows</code></td>
                        <td><code>data-rows</code></td>
                        <td>10</td>
                        <td>How many rows will be displayed on page, if this value is -1, all rows will be displayed</td>
                    </tr>
                    <tr>
                        <td><code>rowsSteps</code></td>
                        <td><code>data-rows-steps</code></td>
                        <td>10, 25, 50, 100</td>
                        <td>Steps fo rows select box</td>
                    </tr>
                    <tr>
                        <td><code>staticView</code></td>
                        <td><code>data-static-view</code></td>
                        <td>false</td>
                        <td>If true, table always displayed as defined</td>
                    </tr>
                    <tr>
                        <td><code>viewSaveMode</code></td>
                        <td><code>data-view-save-mode</code></td>
                        <td>client</td>
                        <td>Where table view will be saved, values: client, server</td>
                    </tr>
                    <tr>
                        <td><code>viewSavePath</code></td>
                        <td><code>data-view-save-path</code></td>
                        <td>TABLE:$1:OPTIONS</td>
                        <td>Key for client-side, href for server-side. $1 will be replaced with table id</td>
                    </tr>
                    <tr>
                        <td><code>decimalSeparator</code></td>
                        <td><code>data-decimal-separator</code></td>
                        <td>. (dot)</td>
                        <td>Decimal separator for numeric values. Used for right sorting</td>
                    </tr>
                    <tr>
                        <td><code>thousandSeparator</code></td>
                        <td><code>data-thousand-separator</code></td>
                        <td>, (comma)</td>
                        <td>Thousand separator for numeric values. Used for right sorting</td>
                    </tr>
                    <tr>
                        <td><code>tableRowsCountTitle</code></td>
                        <td><code>data-table-rows-count-title</code></td>
                        <td>Show entries:</td>
                        <td>Title for rows steps box</td>
                    </tr>
                    <tr>
                        <td><code>tableSearchTitle</code></td>
                        <td><code>data-table-search-title</code></td>
                        <td>Search:</td>
                        <td>Title for search input</td>
                    </tr>
                    <tr>
                        <td><code>tableInfoTitle</code></td>
                        <td><code>data-table-info-title</code></td>
                        <td>Showing $1 to $2 of $3 entries</td>
                        <td>Title for table info block</td>
                    </tr>
                    <tr>
                        <td><code>paginationPrevTitle</code></td>
                        <td><code>data-pagination-prev-title</code></td>
                        <td>Prev</td>
                        <td>Title pagination prev button</td>
                    </tr>
                    <tr>
                        <td><code>paginationNextTitle</code></td>
                        <td><code>data-pagination-next-title</code></td>
                        <td>Next</td>
                        <td>Title pagination next button</td>
                    </tr>
                    <tr>
                        <td><code>allRecordsTitle</code></td>
                        <td><code>data-all-records-title</code></td>
                        <td>All</td>
                        <td>Title all records in rows steps block</td>
                    </tr>
                    <tr>
                        <td><code>inspectorTitle</code></td>
                        <td><code>data-inspector-title</code></td>
                        <td>Inspector</td>
                        <td>Title for table inspector window</td>
                    </tr>
                    <tr>
                        <td><code>activityType</code></td>
                        <td><code>data-activity-type</code></td>
                        <td>cycle</td>
                        <td>Activity type for long operations</td>
                    </tr>
                    <tr>
                        <td><code>activityStyle</code></td>
                        <td><code>data-activity-style</code></td>
                        <td>color</td>
                        <td>Activity style for long operations</td>
                    </tr>
                    <tr>
                        <td><code>activityTimeout</code></td>
                        <td><code>data-activity-timeout</code></td>
                        <td>100</td>
                        <td>Timeout between activity show and table operation start</td>
                    </tr>
                    <tr>
                        <td><code>cellWrapper</code></td>
                        <td><code>data-cell-wrapper</code></td>
                        <td>true</td>
                        <td>If true, cell data will be placed in div with class <code>cell-wrapper</code></td>
                    </tr>
                    <tr>
                        <td><code>horizontalScroll</code></td>
                        <td><code>data-horizontal-scroll</code></td>
                        <td>false</td>
                        <td>Helper to create table horizontal scrolling for wide table</td>
                    </tr>
                    </tbody>
                </table>
                <div class="example">
                    <table class="table striped table-border mt-4"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-show-activity="false"
                           data-source="data/table.json"
                           data-rownum="true"
                           data-check="true"
                           data-check-style="2"
                    >
                    </table>
                </div>
                <pre><code class="html">
                    &lt;table class="table striped table-border mt-4"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-show-activity="false"
                           data-source="data/table.json"
                           data-rownum="true"
                           data-check="true"
                           data-check-style="2"
                    &gt;
                    &lt;/table&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_table_columns">Columns definition</h3>
                <p>
                    For right works component, you must right define columns.
                    Columns must be defined in <code>thead</code> section.
                    You can use any attributes to define its:
                </p>
                <table class="table table-border cell-border options-table mt-4">
                    <thead>
                    <tr>
                        <td>Attribute</td>
                        <td>Desc</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>data-name</code></td>
                        <td>Column name</td>
                    </tr>
                    <tr>
                        <td><code>data-sortable</code></td>
                        <td>Sortable column or not. Values: <code>true</code>, <code>false</code></td>
                    </tr>
                    <tr>
                        <td><code>data-sort-dir</code></td>
                        <td>Initial sorting direction. Values: <code>asc</code>, <code>desc</code></td>
                    </tr>
                    <tr>
                        <td><code>data-format</code></td>
                        <td>Data format helper for right sorting. Values: <code>string</code> (default), <code>date</code>, <code>number</code>, <code>int</code>, <code>float</code>, <code>money</code></td>
                    </tr>
                    <tr>
                        <td><code>data-format-mask</code></td>
                        <td>If you data is date, and date not in ECMAScript date format, you must define data mask (see Extensions for string.toDate in <a href="dateformat.html">this article</a>)</td>
                    </tr>
                    <tr>
                        <td><code>data-size</code></td>
                        <td>If can define size for column.</td>
                    </tr>
                    <tr>
                        <td><code>data-show</code></td>
                        <td>If can define show or hide column.</td>
                    </tr>
                    <tr>
                        <td><code>data-cls</code></td>
                        <td>If can define additional classes for column heading cell.</td>
                    </tr>
                    <tr>
                        <td><code>data-cls-column</code></td>
                        <td>If can define additional classes for column data cells.</td>
                    </tr>
                    </tbody>
                </table>
                <pre><code class="html">
                    &lt;table class="table" data-role="table"&gt;
                    &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th data-sortable="true" data-sort-dir="asc"&gt;Name&lt;/th&gt;
                        &lt;th data-sortable="true"&gt;Office&lt;/th&gt;
                        &lt;th data-sortable="true" data-format="number"&gt;Age&lt;/th&gt;
                        &lt;th data-sortable="true" data-format="date"&gt;Start date&lt;/th&gt;
                        &lt;th data-sortable="true" data-show="false" data-format="money"&gt;Salary&lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;/thead&gt;
                    ...
                    &lt;/table&gt;
                </code></pre>
                <p class="remark info">
                    Currently, you can define only one row in head section.
                </p>

                <h3 id="_table_data">Data definition</h3>
                <p>
                    Data must be defined in <code>tbody</code> section.
                    If you want to add classes to data cell, use <code>head cell</code> attribute <code>data-cls-column</code>.
                </p>
                <div class="example">
                    <table id="t1" class="table striped table-border mt-4"
                           data-role="table" data-static-view="true"
                           data-cls-table-top="row flex-nowrap"
                           data-cls-search="cell-md-8"
                           data-cls-rows-count="cell-md-4"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-show-activity="false">
                        <thead>
                        <tr>
                            <th class="sort-asc" data-sortable="true">Name</th>
                            <th data-sortable="true">Office</th>
                            <th data-cls-column="bg-cyan fg-white text-center" data-sortable="true" data-format="number">Age</th>
                            <th data-cls-column="bg-orange fg-white text-center" data-sortable="true" data-format="date">Start date</th>
                            <th data-cls-column="bg-green fg-white text-right" data-sortable="true" data-format="money">Salary</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Tiger Nixon</td>
                            <td>Edinburgh</td>
                            <td>61</td>
                            <td>2011/04/25</td>
                            <td>$320,800</td>
                        </tr>
                        <tr>
                            <td>Garrett Winters</td>
                            <td>Tokyo</td>
                            <td>63</td>
                            <td>2011/07/25</td>
                            <td>$170,750</td>
                        </tr>
                        <tr>
                            <td>Ashton Cox</td>
                            <td>San Francisco</td>
                            <td>66</td>
                            <td>2009/01/12</td>
                            <td>$86,000</td>
                        </tr>
                        <tr>
                            <td>Cedric Kelly</td>
                            <td>Edinburgh</td>
                            <td>22</td>
                            <td>2012/03/29</td>
                            <td>$433,060</td>
                        </tr>
                        <tr>
                            <td>Airi Satou</td>
                            <td>Tokyo</td>
                            <td>33</td>
                            <td>2008/11/28</td>
                            <td>$162,700</td>
                        </tr>
                        <tr>
                            <td>Brielle Williamson</td>
                            <td>New York</td>
                            <td>61</td>
                            <td>2012/12/02</td>
                            <td>$372,000</td>
                        </tr>
                        <tr>
                            <td>Herrod Chandler</td>
                            <td>San Francisco</td>
                            <td>59</td>
                            <td>2012/08/06</td>
                            <td>$137,500</td>
                        </tr>
                        <tr>
                            <td>Rhona Davidson</td>
                            <td>Tokyo</td>
                            <td>55</td>
                            <td>2010/10/14</td>
                            <td>$327,900</td>
                        </tr>
                        <tr>
                            <td>Colleen Hurst</td>
                            <td>San Francisco</td>
                            <td>39</td>
                            <td>2009/09/15</td>
                            <td>$205,500</td>
                        </tr>
                        <tr>
                            <td>Sonya Frost</td>
                            <td>Edinburgh</td>
                            <td>23</td>
                            <td>2008/12/13</td>
                            <td>$103,600</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <pre><code class="html">
                    &lt;table class="table" data-role="table"&gt;
                        &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th &gt;Name&lt;/th&gt;
                            &lt;th &gt;Office&lt;/th&gt;
                            &lt;th data-cls-column="bg-cyan fg-white text-center"&gt;Age&lt;/th&gt;
                            &lt;th data-cls-column="bg-orange fg-white text-center" &gt;Start date&lt;/th&gt;
                            &lt;th data-cls-column="bg-green fg-white text-right" &gt;Salary&lt;/th&gt;
                        &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody&gt;
                        &lt;tr&gt;
                            &lt;td&gt;Tiger Nixon&lt;/td&gt;
                            &lt;td&gt;Edinburgh&lt;/td&gt;
                            &lt;td&gt;61&lt;/td&gt;
                            &lt;td&gt;2011/04/25&lt;/td&gt;
                            &lt;td&gt;$320,800&lt;/td&gt;
                        &lt;/tr&gt;
                        ...
                        &lt;/tbody&gt;
                    &lt;/table&gt;
                </code></pre>

                <h3 id="_table_sorting">Table sorting</h3>
                <p>
                    To use <code>sorting</code>, you must define columns, who can be sorted.
                    To create sortable column, add attribute <code>data-sortable="true"</code> to head cell.
                    If you need to sort on this column after table init, add attribute <code>data-sort-dir="asc|desc"</code> for initializing sorting direction.
                </p>
                <p>
                    If data for sortable column is a not string, you must use attribute <code>data-format</code>.
                    If data is date and date not in ECMAScript format, you must add attribute <code>data-format-mask</code>.
                    More about covert string to date you can read in <a href="dateformat.html">this article</a>
                </p>
                <div class="example">
                    <table class="table striped table-border mt-4"
                           data-role="table"
                           data-cls-table-top="row flex-nowrap"
                           data-cls-search="cell-md-8"
                           data-cls-rows-count="cell-md-4"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-show-activity="false"
                           data-source="data/table.json"
                    >
                    </table>
                </div>
                <pre><code class="html">
                    &lt;table class="table" data-role="table"&gt;
                        &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th data-sortable="true" data-sort-dir="asc"&gt;ID&lt;/th&gt;
                            &lt;th data-sortable="true"&gt;Name&lt;/th&gt;
                            &lt;th data-sortable="true" data-format="date" data-format-mask="%d-%m-%y" &gt;Start&lt;/th&gt;
                            &lt;th data-sortable="true" data-format="int"&gt;Age&lt;/th&gt;
                            &lt;th data-sortable="true" data-format="money"&gt;Salary&lt;/th&gt;
                        &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody&gt;
                        &lt;tr&gt;
                            &lt;td&gt;1&lt;/td&gt;
                            &lt;td&gt;Tiger Nixon&lt;/td&gt;
                            &lt;td&gt;Edinburgh&lt;/td&gt;
                            &lt;td&gt;25/04/2011&lt;/td&gt;
                            &lt;td&gt;61&lt;/td&gt;
                            &lt;td&gt;$320,800&lt;/td&gt;
                        &lt;/tr&gt;
                        ...
                        &lt;/tbody&gt;
                    &lt;/table&gt;
                </code></pre>

                <h3 id="_table_search">Table search</h3>
                <p>
                    Table component support interactive search. To activate search function you must:
                </p>
                <ol class="decimal mt-4">
                    <li>Enable search input field with attribute <code>data-show-search="true"</code> (enabled by default)</li>
                    <li>Set min string length for search with attribute <code>data-search-min-length</code> (default: 1)</li>
                    <li>Setup threshold for start search with attribute <code>data-search-threshold</code> (default: 500)</li>
                </ol>
                <div class="example">
                    <table class="table striped table-border mt-4"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-source="data/table.json"
                           data-show-rows-steps="false"
                           data-show-search="true"
                           data-search-min-length="3"
                           data-search-threshold="300"
                    >
                    </table>
                </div>
                <pre><code class="html">
                    &lt;table class="table"
                           data-role="table"
                           data-show-search="true"
                           data-search-min-length="3"
                           data-search-threshold="300"
                    &gt;
                    &lt;/table&gt;
                </code></pre>
                <p>
                    By default, all fields are searched. You can define the fields to be searched for.
                    To define it use attribute <code>data-search-fields</code>.
                    Fields list is must be a comma separated string with field names, defined in head cell attribute <code>data-name</code>.
                </p>
                <pre><code class="html">
                    &lt;table class="table"
                           data-role="table"
                           data-show-search="true"
                           data-search-min-length="3"
                           data-search-threshold="300"
                           data-search-fields="name, age"&gt;
                        &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th data-name="id" &gt;ID&lt;/th&gt;
                            &lt;th data-name="name" &gt;Name&lt;/th&gt;
                            &lt;th data-name="start" &gt;Start&lt;/th&gt;
                            &lt;th data-name="age" &gt;Age&lt;/th&gt;
                            &lt;th data-name="salary" &gt;Salary&lt;/th&gt;
                        &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody&gt;
                        &lt;tr&gt;
                            &lt;td&gt;1&lt;/td&gt;
                            &lt;td&gt;Tiger Nixon&lt;/td&gt;
                            &lt;td&gt;Edinburgh&lt;/td&gt;
                            &lt;td&gt;25/04/2011&lt;/td&gt;
                            &lt;td&gt;61&lt;/td&gt;
                            &lt;td&gt;$320,800&lt;/td&gt;
                        &lt;/tr&gt;
                        ...
                        &lt;/tbody&gt;
                    &lt;/table&gt;
                </code></pre>

                <h3 id="_table_filtering">Filtering</h3>
                <p>
                    Table components contains API to create custom filters for data.
                    These <code>filters</code> works before <code>search</code> and is connected with it by the <code>and</code> operator if search is not empty.
                    These filters are user-defined functions and can be applied in two ways: with attribute <code>data-filters</code> and with table api method <code>addFilter</code>.
                    In both cases, the functions must be defined before they are used.
                </p>
                <h4 class="text-light">Use attribute</h4>
                <div class="example">
                    <script>
                        function myFilter(row, heads){
                            var is_active_index = 0;
                            heads.forEach(function(el, i){
                                if (el.name === "name") {
                                    is_active_index = i;
                                }
                            });
                            return row[is_active_index].contains("Jak");
                        }
                    </script>
                    <table class="table striped table-border mt-4"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-source="data/table.json"
                           data-show-rows-steps="false"
                           data-show-search="true"
                           data-search-min-length="3"
                           data-search-threshold="300"
                           data-filters="myFilter"
                    >
                    </table>
                </div>
                <pre><code>
                    &lt;script&gt;
                        function myFilter(row, heads){
                            var is_active_index = 0;
                            heads.forEach(function(el, i){
                                if (el.name === "name") {
                                    is_active_index = i;
                                }
                            });
                            return row[is_active_index].contains("Jak");
                        }
                    &lt;/script&gt;

                    &lt;table class="table"
                        data-role="table"
                        data-filters="myFilter"
                    &gt;
                    ...
                    &lt;/table&gt;
                </code></pre>

                <h4 class="text-light">Use table API</h4>

                <div class="example">
                    <div>
                        <input type="checkbox" data-role="switch" data-caption="Apply filter" onchange="toggleFilter(this.checked)">
                    </div>
                    <table class="table striped table-border mt-4" id="t-flt"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-source="data/table.json"
                           data-show-rows-steps="false"
                           data-show-search="false"
                    >
                    </table>
                    <script>
                        var filterIndex;
                        function toggleFilter(checked){
                            var table = $('#t-flt').data('table');
                            if (checked) {
                                filterIndex = table.addFilter(function(row, heads){
                                    var is_active_index = 0;
                                    heads.forEach(function(el, i){
                                        if (el.name === "name") {
                                            is_active_index = i;
                                        }
                                    });
                                    return row[is_active_index].contains("Jak");
                                }, true);
                            } else {
                                table.removeFilter(filterIndex, true);
                            }
                        }
                    </script>
                </div>
                <pre><code>
                    &lt;div&gt;
                        &lt;input type="checkbox" data-role="switch"
                            data-caption="Apply filter" onchange="toggleFilter(this.checked)"&gt;
                    &lt;/div&gt;
                    &lt;table class="table striped table-border mt-4" id="t-flt"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-source="data/table.json"
                           data-show-rows-steps="false"
                           data-show-search="false"
                    &gt;
                    &lt;/table&gt;
                    &lt;script&gt;
                        var filterIndex;
                        function toggleFilter(checked){
                            var table = $('#t-flt').data('table');
                            if (checked) {
                                filterIndex = table.addFilter(function(row, heads){
                                    var is_active_index = 0;
                                    heads.forEach(function(el, i){
                                        if (el.name === "name") {
                                            is_active_index = i;
                                        }
                                    });
                                    return row[is_active_index].contains("Jak");
                                }, true);
                            } else {
                                table.removeFilter(filterIndex, true);
                            }
                        }
                    &lt;/script&gt;
                </code></pre>

                <h4 class="text-light">Filters operator</h4>
                <p>
                    By default, all filters applied with operator <code>and</code>.
                    You can set this to operator <code>or</code> with attribute <code>data-filters-operator="or"</code>.
                </p>
                <div class="example">
                    <div>
                        <input type="checkbox" data-role="switch"
                               data-caption="Apply filter Jak"
                               onchange="toggleFilter2(this.checked)">
                        <input type="checkbox" data-role="switch"
                               data-caption="Apply filter Simon"
                               onchange="toggleFilter3(this.checked)">
                    </div>
                    <table class="table striped table-border mt-4" id="t-flt-2"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-source="data/table.json"
                           data-show-rows-steps="false"
                           data-show-search="false"
                           data-filters-operator="or"
                    >
                    </table>
                    <script>
                        var filterIndex2, filterIndex3;

                        function toggleFilter2(checked){
                            var table = $('#t-flt-2').data('table');
                            if (checked) {
                                filterIndex2 = table.addFilter(function(row, heads){
                                    var is_active_index = 0;
                                    heads.forEach(function(el, i){
                                        if (el.name === "name") {
                                            is_active_index = i;
                                        }
                                    });
                                    return row[is_active_index].contains("Jak");
                                }, true);
                            } else {
                                table.removeFilter(filterIndex2, true);
                            }
                        }

                        function toggleFilter3(checked){
                            var table = $('#t-flt-2').data('table');
                            if (checked) {
                                filterIndex3 = table.addFilter(function(row, heads){
                                    var is_active_index = 0;
                                    heads.forEach(function(el, i){
                                        if (el.name === "name") {
                                            is_active_index = i;
                                        }
                                    });
                                    return row[is_active_index].contains("Simon");
                                }, true);
                            } else {
                                table.removeFilter(filterIndex3, true);
                            }
                        }
                    </script>
                </div>
                <pre><code>
                    &lt;div&gt;
                        &lt;input type="checkbox" data-role="switch"
                               data-caption="Apply filter Jak"
                               onchange="toggleFilter2(this.checked)"&gt;
                        &lt;input type="checkbox" data-role="switch"
                               data-caption="Apply filter Simon"
                               onchange="toggleFilter3(this.checked)"&gt;
                    &lt;/div&gt;
                    &lt;table class="table striped table-border mt-4" id="t-flt-2"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-source="data/table.json"
                           data-show-rows-steps="false"
                           data-show-search="false"
                           data-filters-operator="or"
                    &gt;
                    &lt;/table&gt;
                    &lt;script&gt;
                        var filterIndex2, filterIndex3;

                        function toggleFilter2(checked){
                            var table = $('#t-flt-2').data('table');
                            if (checked) {
                                filterIndex2 = table.addFilter(function(row, heads){
                                    var is_active_index = 0;
                                    heads.forEach(function(el, i){
                                        if (el.name === "name") {
                                            is_active_index = i;
                                        }
                                    });
                                    return row[is_active_index].contains("Jak");
                                }, true);
                            } else {
                                table.removeFilter(filterIndex2, true);
                            }
                        }

                        function toggleFilter3(checked){
                            var table = $('#t-flt-2').data('table');
                            if (checked) {
                                filterIndex3 = table.addFilter(function(row, heads){
                                    var is_active_index = 0;
                                    heads.forEach(function(el, i){
                                        if (el.name === "name") {
                                            is_active_index = i;
                                        }
                                    });
                                    return row[is_active_index].contains("Simon");
                                }, true);
                            } else {
                                table.removeFilter(filterIndex3, true);
                            }
                        }
                    &lt;/script&gt;
                </code></pre>
                <p class="remark warning">
                    <code>Filters</code> works before <code>search</code> and is connected with it by the <code>and</code> operator if search is not empty.
                </p>

                <!-- ads-html -->

                <h3 id="_table_pagination">Pagination</h3>
                <p>
                    To use pagination option, this options must be anabled with attribute <code>data-show-pagination="true"</code> (enabled by default).
                    By default, used pagination short mode. If you need show all pages links in pagination, you can set it with attribute <code>data-pagination-short-mode="false"</code>.
                </p>

                <h4>Pagination short mode</h4>
                <div class="example">
                    <table class="table striped table-border mt-4"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-source="data/table.json"
                           data-pagination-short-mode="true"
                    >
                    </table>
                </div>
                <pre><code class="html">
                    &lt;table class="table" data-role="table"
                            data-pagination-short-mode="true"&gt;
                    ...
                    &lt;/table&gt;
                </code></pre>

                <h4>Pagination all mode</h4>
                <div class="example">
                    <table class="table striped table-border mt-4"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-source="data/table.json"
                           data-pagination-short-mode="false"
                    >
                    </table>
                </div>
                <pre><code class="html">
                    &lt;table class="table" data-role="table"
                            data-pagination-short-mode="false"&gt;
                    ...
                    &lt;/table&gt;
                </code></pre>
                <p>
                    To set <code>title</code> for <code>Previous</code> and <code>Next</code> buttons,
                    use attributes <code>data-pagination-prev-title</code>, <code>data-pagination-next-title</code>.
                </p>

                <h3 id="_table_rows_counter">Rows counter</h3>
                <p>
                    When component works, it creates special select block before a table to set displayed table rows count.
                    You can change default rows counter steps with attribute <code>data-rows-steps="..."</code>.
                    This is a comma delimiter value. To set a default rows count, use attribute <code>data-rows="..."</code>
                    To hide this block, set attribute <code>data-show-rows-steps</code> to <code>false</code> or define custom wrapper.
                    To add all rows mode, you must add <code>-1</code> value to <code>data-rows-steps</code>.
                </p>
                <div class="example">
                    <table class="table striped table-border mt-4"
                           data-role="table"
                           data-rows-steps="-1, 5, 10, 20, 30, 100"
                           data-rows="5"
                           data-source="data/table.json"
                    >
                    </table>
                </div>
                <pre><code>
                    &lt;table data-role="table"
                        data-rows-steps="-1, 5, 10, 20, 30, 100"
                        data-rows="5"
                    &gt;
                        ...
                    &lt;/table&gt;
                </code></pre>

                <h3 id="_table_info">Table info</h3>
                <p>
                    Table info block contains information about rows and current position in table.
                    To enable this feature, use attribute <code>data-show-table-info="true"</code> (enabled by default).
                </p>
                <p>
                    You can change <code>template</code> for table info with attribute <code>data-table-info-title</code>.
                    By default value for this attribute is <code>Showing $1 to $2 of $3 entries</code>.
                    Where <code>$1</code> - from records, <code>$2</code> - to records, <code>$3</code> - total records.
                </p>
                <div class="example">
                    <table class="table striped table-border mt-4"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-source="data/table.json"
                           data-table-info-title="Display from $1 to $2 of $3 records"
                    >
                    </table>
                </div>
                <pre><code class="html">
                    &lt;table class="table" data-role="table"
                           data-table-info-title="Display from $1 to $2 of $3 records"
                    &gt;
                    &lt;/table&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_table_inspector">Table inspector</h3>
                <p>
                    Component table contains inside a <code>table inspector</code> to manipulate columns in visual mode.
                    To open <code>inspector</code>, you must call API method <code>openInspector()</code> or <code>toggleInspector()</code>, and to close it - <code>closeInspector();</code>.
                </p>
                <div class="example">
                    <div class="text-center m-4">
                        <button class="button alert" onclick="$('#t-inspector').data('table').toggleInspector()">Open Inspector</button>
                    </div>
                    <table class="table striped table-border mt-4" id="t-inspector"
                           data-role="table"
                           data-rows="5"
                           data-rows-steps="5, 10"
                           data-source="data/table.json"
                    >
                    </table>
                </div>

                <h4>Table view</h4>
                <p>
                    For each table, a <code>view</code> is created, which stores information about the current state of the table.
                    All changes that the user makes in the table inspector are saved in this <code>view</code>.
                </p>
                <p>
                    You can setup <code>view options</code> with special attributes:
                </p>
                <ul class="mt-4">
                    <li><code>data-static-view="true|false"</code> - use static view or not</li>
                    <li><code>data-view-save-mode="client|server"</code> - how view is stored</li>
                    <li><code>data-view-save-path="storage_key|url"</code> - where view is stored</li>
                </ul>

                <p class="text-bold">Client</p>
                <pre class="mt-0"><code class="html">
                    &lt;!-- $1 in save path will be replaced with table id --&gt;
                    &lt;table class="table" data-role="table"
                           data-view-save-mode="client"
                           data-view-save-path="TABLE:$1:KEYS"
                    &gt;
                    &lt;/table&gt;
                </code></pre>

                <p class="text-bold">Server</p>
                <pre class="mt-0"><code class="html">
                    &lt;table class="table" data-role="table"
                           data-view-save-mode="server"
                           data-view-save-path="//server.com/save_view.php"
                    &gt;
                    &lt;/table&gt;
                </code></pre>

                <h4>View format</h4>
                <p>
                    Object view have next format:
                </p>
                <pre><code>
                    {
                        0: {index: 0, index-view: 0, show: true, size: 50}
                        1: {index: 1, index-view: 1, show: true, size: ""}
                        2: {index: 2, index-view: 2, show: true, size: 150}
                        3: {index: 3, index-view: 3, show: true, size: 80}
                        4: {index: 4, index-view: 4, show: true, size: 150}
                        ...
                    }
                </code></pre>
                <p>
                    Where <code>index</code> - field index in original data,
                    <code>index-view</code> - field index in displayed table,
                    <code>show</code> - field displayed or not,
                    <code>size</code> - field size.
                </p>

                <h3 id="_table_export">Export table data to CSV</h3>
                <p>
                    You can exporting table data into CSV file.
                    To export data, you must use API method <code>export(to, mode, filename, options)</code>.
                </p>
                <pre><code>
                    var table = $(el).data('table');
                    table.export('CSV', 'all', 'table-export.csv', {
                        csvDelimiter: "\t",
                        csvNewLine: "\r\n",
                        includeHeader: true
                    });
                </code></pre>

                <h4>Export to...</h4>
                <p>
                    Currently supported only <code>CSV</code> target.
                </p>

                <h4>Export modes</h4>
                <ul>
                    <li><code>all</code> - all table data</li>
                    <li><code>all-filtered</code> - all with applied filters and search</li>
                    <li><code>checked</code> - checked rows</li>
                    <li><code>view</code> - rows, displayed in current page</li>
                </ul>

                <h4>Export options</h4>
                <ul>
                    <li><code>csvDelimiter</code> - default <code>\t</code></li>
                    <li><code>csvNewLine</code> - default <code>\r\n</code></li>
                    <li><code>includeHeader</code> - default <code>true</code></li>
                </ul>

                <h3 id="_table_external_data">External data</h3>
                <p>
                    You can create table from external JSON data.
                    To create it, use attribute <code>data-source</code>.
                </p>
                <div class="example">
                    <table class="table striped table-border mt-4"
                           data-role="table"
                           data-source="data/table.json"
                    >
                    </table>
                </div>
                <pre><code>
                    &lt;table class="table striped table-border mt-4"
                           data-role="table"
                           data-source="data/table.json"
                    &gt;
                    &lt;/table&gt;
                </code></pre>

                <h4>External data format</h4>
                <p>
                    To use external source, you must create JSON data in specific format. Example of <a href="data/table.json">JSON file</a>.
                </p>
                <pre><code>
                    {
                        header: [...],
                        data: [...]
                    }
                </code></pre>

                <h5>Header</h5>
                <p>
                    In <code>header</code>, you must describe information about all table columns.
                    Each item can contains the next data:
                </p>
                <ul class="mt-4">
                    <li><code>name</code> - column name</li>
                    <li><code>sortable</code> - sortable or not</li>
                    <li><code>sortDir</code> - sort direction asc or desc</li>
                    <li><code>format</code> - column format</li>
                    <li><code>cls</code> - classes for head cell</li>
                    <li><code>clsColumn</code> - classes for data cell</li>
                    <li><code>size</code> - column size</li>
                    <li><code>show</code> - show or hide column</li>
                    <li><code>template</code> - template for cell data. Use <code>this.value</code> to manipulate with cell value</li>
                    <li><code>thousandSeparator</code> - thousand separator for numbers</li>
                    <li><code>decimalSeparator</code> - decimal separator for numbers</li>
                </ul>
                <p class="remark info">
                    See <a href="micro-tpl.html">this article</a> for details about micro templating in Metro 4.
                </p>
                <pre><code>
                  "header": [
                    {
                      "name": "id",
                      "title": "ID",
                      "size": 50,
                      "sortable": true,
                      "sortDir": "asc",
                      "format": "number"
                    },
                    {
                      "name": "name",
                      "title": "Name",
                      "sortable": true
                    },7
                    {
                      "name": "start",
                      "title": "Start",
                      "sortable": true,
                      "size": 150,
                      "format": "date",
                      "formatMask": "dd-mm-yyyy"
                    },
                    {
                      "name": "age",
                      "title": "Age",
                      "sortable": true,
                      "size": 80
                    },
                    {
                      "name": "salary",
                      "title": "Salary",
                      "sortable": true,
                      "size": 150,
                      "format": "money",
                      "show": true
                    }
                  ]
                </code></pre>

                <h4>Data</h4>
                <p>
                    In data section you must put simple text or html data.
                </p>
                <pre><code>
                  "data": [
                    [
                      1,
                      "Aidan",
                      "31-12-2017",
                      63,
                      "$7,843"
                    ],
                    [
                      2,
                      "Ferris",
                      "13-06-2018",
                      28,
                      "$8,877"
                    ],
                    [
                      3,
                      "Joseph",
                      "06-02-2018",
                      43,
                      "$5,645"
                    ],
                  ]
                </code></pre>

                <h3 id="_table_events">Events</h3>
                <p>
                    When table works, it generates a series of events that you can use to interact with the component.
                </p>
                <table class="table cell-border table-border options-table mt-4">
                    <thead>
                    <tr>
                        <td>Option</td>
                        <td>Data-*</td>
                        <td>Desc</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>onDraw</code></td>
                        <td><code>data-on-draw</code></td>
                        <td>Event fired when the table was drawn.</td>
                    </tr>
                    <tr>
                        <td><code>onDrawRow</code></td>
                        <td><code>data-on-draw-row</code></td>
                        <td>Event fired when draw row.</td>
                    </tr>
                    <tr>
                        <td><code>onDrawCell</code></td>
                        <td><code>data-on-draw-cell</code></td>
                        <td>Event fired when draw cell.</td>
                    </tr>
                    <tr>
                        <td><code>onAppendRow</code></td>
                        <td><code>data-on-append-row</code></td>
                        <td>Event fired when row added to table.</td>
                    </tr>
                    <tr>
                        <td><code>onAppendCell</code></td>
                        <td><code>data-on-append-cell</code></td>
                        <td>Event fired when cell added to row.</td>
                    </tr>
                    <tr>
                        <td><code>onSortStart</code></td>
                        <td><code>data-on-sort-start</code></td>
                        <td>Event fired when sorting process stated.</td>
                    </tr>
                    <tr>
                        <td><code>onSortStop</code></td>
                        <td><code>data-on-sort-stop</code></td>
                        <td>Event fired when sorting process stopped.</td>
                    </tr>
                    <tr>
                        <td><code>onSortItemSwitch</code></td>
                        <td><code>data-on-sort-item-switch</code></td>
                        <td>Event fired when table rows switched on sorting process.</td>
                    </tr>
                    <tr>
                        <td><code>onSearch(filter, items)</code></td>
                        <td><code>data-on-search</code></td>
                        <td>Event fired on search.</td>
                    </tr>
                    <tr>
                        <td><code>onRowsCountChange(val)</code></td>
                        <td><code>data-on-rows-count-change</code></td>
                        <td>Event fired when user change rows count to display.</td>
                    </tr>
                    <tr>
                        <td><code>onDataLoad(source)</code></td>
                        <td><code>data-on-data-load</code></td>
                        <td>Event fired before data will be loaded.</td>
                    </tr>
                    <tr>
                        <td><code>onDataLoaded(source, response)</code></td>
                        <td><code>data-on-data-loaded</code></td>
                        <td>Event fired after data loaded.</td>
                    </tr>
                    <tr>
                        <td><code>onDataLoadError(source, xhr, textStatus, errorThrown)</code></td>
                        <td><code>data-on-data-load-error</code></td>
                        <td>Event fired when data loads stop with error.</td>
                    </tr>
                    <tr>
                        <td><code>onFilterRowAccepted(row)</code></td>
                        <td><code>data-on-filter-row-accepted</code></td>
                        <td>Row accepted by filters.</td>
                    </tr>
                    <tr>
                        <td><code>onFilterRowDeclined(row)</code></td>
                        <td><code>data-on-filter-row-declined</code></td>
                        <td>Row declined by filters.</td>
                    </tr>
                    <tr>
                        <td><code>onCheckClick()</code></td>
                        <td><code>data-on-check-click</code></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><code>onCheckClickAll()</code></td>
                        <td><code>data-on-check-click-all</code></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><code>onCheckDraw()</code></td>
                        <td><code>data-on-check-draw</code></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><code>onViewSave()</code></td>
                        <td><code>data-on-view-save</code></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><code>onViewGet()</code></td>
                        <td><code>data-on-view-get</code></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><code>onTableCreate(el)</code></td>
                        <td><code>data-on-table-create</code></td>
                        <td>Event fired after the table created.</td>
                    </tr>
                    </tbody>
                </table>

                <h3 id="_table_methods">Methods</h3>
                <p>
                    You can use table API methods to interact with it.
                </p>
                <ul class="mt-4">
                    <li><strong>draw()</strong></li>
                    <li><strong>sorting(dir)</strong></li>
                    <li><strong>search(val)</strong></li>
                    <li><strong>loadData(source, review)</strong></li>
                    <li><strong>reload(review)</strong></li>
                    <li><strong>next()</strong></li>
                    <li><strong>prev()</strong></li>
                    <li><strong>first()</strong></li>
                    <li><strong>last()</strong></li>
                    <li><strong>page(num)</strong></li>
                    <li><strong>addFilter(func, redraw)</strong></li>
                    <li><strong>removeFilter(func_index)</strong></li>
                    <li><strong>removeFilters()</strong></li>
                    <li><strong>getItems()</strong></li>
                    <li><strong>getHeads()</strong></li>
                    <li><strong>getFilteredItems()</strong></li>
                    <li><strong>getSelectedItems()</strong></li>
                    <li><strong>getStoredKeys()</strong></li>
                    <li><strong>clearSelected()</strong></li>
                    <li><strong>clearSelected(redraw)</strong></li>
                    <li><strong>getFilters()</strong></li>
                    <li><strong>getFiltersIndexes()</strong></li>
                    <li><strong>openInspector()</strong></li>
                    <li><strong>closeInspector()</strong></li>
                    <li><strong>toggleInspector()</strong></li>
                    <li><strong>resetView()</strong></li>
                    <li><strong>export(to, mode, filename, options)</strong></li>
                    <li><strong>deleteItem(field_index, val)</strong></li>
                    <li><strong>deleteItemByName(field_name, val)</strong></li>
                    <li><strong>deleteItem(field_index, function(val){return true|false})</strong></li>
                    <li><strong>deleteItemByName(field_name, function(val){return true|false})</strong></li>
                </ul>

                <!-- ads-html -->

                <h3 id="_table_customize">Customize</h3>
                <p>
                    You can customize style of table and its elements with next options:
                </p>
                <script>
                    var customizeAttributes = [
                        ["clsComponent", "data-cls-component", "Additional classes for table component"],
                        ["clsTableContainer", "data-cls-table-container", "Additional for table container"],
                    ];
                </script>
                <table class="table cell-border table-border options-table mt-4" data-role="table" data-static="true" data-head="optionsTableHeader" data-body="customizeAttributes">
                    <tbody>
                    <tr>
                        <td>clsTable</td>
                        <td><code>data-cls-table</code></td>
                        <td>Additional class for table</td>
                    </tr>
                    <tr>
                        <td>clsHead</td>
                        <td><code>data-cls-head</code></td>
                        <td>Additional class for table head</td>
                    </tr>
                    <tr>
                        <td>clsHeadRow</td>
                        <td><code>data-cls-head-row</code></td>
                        <td>Additional class for table head row</td>
                    </tr>
                    <tr>
                        <td>clsHeadCell</td>
                        <td><code>data-cls-head-cell</code></td>
                        <td>Additional class for table head cell</td>
                    </tr>
                    <tr>
                        <td>clsBody</td>
                        <td><code>data-cls-body</code></td>
                        <td>Additional class for table body</td>
                    </tr>
                    <tr>
                        <td>clsBodyRow</td>
                        <td><code>data-cls-body-row</code></td>
                        <td>Additional class for table body row</td>
                    </tr>
                    <tr>
                        <td>clsBodyCell</td>
                        <td><code>data-cls-body-cell</code></td>
                        <td>Additional class for table body cell</td>
                    </tr>
                    <tr>
                        <td>clsFooter</td>
                        <td><code>data-cls-footer</code></td>
                        <td>Additional class for table footer</td>
                    </tr>
                    <tr>
                        <td>clsFooterRow</td>
                        <td><code>data-cls-footer-row</code></td>
                        <td>Additional class for table footer row</td>
                    </tr>
                    <tr>
                        <td>clsFooterCell</td>
                        <td><code>data-cls-footer-cell</code></td>
                        <td>Additional class for table footer cell</td>
                    </tr>
                    <tr>
                        <td>clsPagination</td>
                        <td><code>data-cls-pagination</code></td>
                        <td>Additional class for table pagination</td>
                    </tr>
                    <tr>
                        <td>clsTableTop</td>
                        <td><code>data-cls-table-top</code></td>
                        <td>Additional class for table top block</td>
                    </tr>
                    <tr>
                        <td>clsTableBottom</td>
                        <td><code>data-cls-table-bottom</code></td>
                        <td>Additional class for table bottom block</td>
                    </tr>
                    <tr>
                        <td>clsTableInfo</td>
                        <td><code>data-cls-table-info</code></td>
                        <td>Additional class for table info block</td>
                    </tr>
                    <tr>
                        <td>clsTablePagination</td>
                        <td><code>data-cls-table-pagination</code></td>
                        <td>Additional class for table pagination block</td>
                    </tr>
                    <tr>
                        <td>clsRowsCount</td>
                        <td><code>data-cls-rows-count</code></td>
                        <td>Additional class for rows count block</td>
                    </tr>
                    <tr>
                        <td>clsSearch</td>
                        <td><code>data-cls-search</code></td>
                        <td>Additional class for search block</td>
                    </tr>
                    <tr>
                        <td>clsRow</td>
                        <td><code>data-cls-row</code></td>
                        <td>Additional class for each data row</td>
                    </tr>
                    <tr>
                        <td>clsRowEven</td>
                        <td><code>data-cls-row-even</code></td>
                        <td>Additional class for even data rows</td>
                    </tr>
                    <tr>
                        <td>clsRowOdd</td>
                        <td><code>data-cls-row-odd</code></td>
                        <td>Additional class for odd data rows</td>
                    </tr>
                    </tbody>
                </table>

                <h3 id="_table_custom_wrappers">Custom elements wrappers</h3>
                <p>
                    You can set custom wrappers for <code>search</code>, <code>rows counter</code>, <code>table info</code> and <code>pagination</code> elements.
                    To set it, use special named attributes:
                    <code>data-search-wrapper</code>,
                    <code>data-rows-wrapper</code>,
                    <code>data-info-wrapper</code>,
                    <code>data-pagination-wrapper</code>.
                </p>
                <div class="example">
                    <div class="row mb-2">
                        <div class="cell-md-8 my-search-wrapper"></div>
                        <div class="cell-md-4 my-rows-wrapper"></div>
                    </div>
                    <p class="h3 text-center my-info-wrapper"></p>
                    <div class="d-flex flex-justify-center my-pagination-wrapper"></div>
                    <table class="table table-border striped"
                           data-role="table"
                           data-rows-steps="-1, 5, 10"
                           data-rows="5"
                           data-info-wrapper=".my-info-wrapper"
                           data-pagination-wrapper=".my-pagination-wrapper"
                           data-search-wrapper=".my-search-wrapper"
                           data-rows-wrapper=".my-rows-wrapper"
                           data-source="data/table.json">
                    </table>
                    <div class="d-flex flex-justify-center my-pagination-wrapper"></div>
                </div>
                <pre><code>
                    &lt;div class="row mb-2"&gt;
                        &lt;div class="cell-md-8 my-search-wrapper"&gt;&lt;/div&gt;
                        &lt;div class="cell-md-4 my-rows-wrapper"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;p class="h3 text-center my-info-wrapper"&gt;&lt;/p&gt;
                    &lt;div class="d-flex flex-justify-center my-pagination-wrapper"&gt;&lt;/div&gt;
                    &lt;table class="table table-border striped"
                           data-role="table"
                           data-rows-steps="5, 10"
                           data-rows="5"
                           data-info-wrapper=".my-info-wrapper"
                           data-pagination-wrapper=".my-pagination-wrapper"
                           data-search-wrapper=".my-search-wrapper"
                           data-rows-wrapper=".my-rows-wrapper"
                           data-source="data/table.json"&gt;
                    &lt;/table&gt;
                    &lt;div class="d-flex flex-justify-center my-pagination-wrapper"&gt;&lt;/div&gt;
                </code></pre>

                <h3 id="_table_horizontal_scroll">Horizontal scroll</h3>
                <p>
                    You can enable horizontal scrolling for wide table. To enable it, use attribute <code>data-horizontal-scroll="true"</code>.
                </p>
                <div class="example">
                    <table class="table table-border striped"
                           data-role="table"
                           data-rows-steps="-1, 5, 10"
                           data-rows="5"
                           data-horizontal-scroll="true"
                           data-source="data/table-wide.json">
                    </table>
                </div>
                <pre><code>
                    &lt;table class="table table-border striped"
                           data-role="table"
                           data-rows-steps="-1, 5, 10"
                           data-rows="5"
                           data-horizontal-scroll="true"
                           data-source="data/table-wide.json"&gt;
                    &lt;/table&gt;
                </code></pre>
                <p>
                    You can stop horizontal scrolling with attribute <code>data-horizontal-scroll-stop</code>.
                </p>
                <div class="example no-overflow">
                    <table class="table table-border striped"
                           data-role="table"
                           data-rows-steps="-1, 5, 10"
                           data-rows="5"
                           data-horizontal-scroll="true"
                           data-horizontal-scroll-stop="lg"
                           data-source="data/table-wide.json">
                    </table>
                </div>
                <pre><code>
                    &lt;table class="table table-border striped"
                           data-role="table"
                           data-rows-steps="-1, 5, 10"
                           data-rows="5"
                           data-horizontal-scroll="true"
                           data-horizontal-scroll-stop="lg"
                           data-source="data/table-wide.json"&gt;
                    &lt;/table&gt;
                </code></pre>

            </main>
        </div>
    </div>

    <script src="docsearch/docsearch.min.js"></script>

    <script src="js/defines.js"></script>

    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>